<template>
  <div id="login-component">
    <div class="login-component-line1">
      <span class="login-title">密码登录</span>
      <h1>
        <a href="#">
          <img src="../../public/scancodelogin.png" alt="#" />
        </a>
      </h1>
    </div>
    <div class="login-compoment-line2">
      <span>不支持华师在线管理平台账号及各主流社交媒体账号登录</span>
    </div>
    <!-- form -->
    <div class="login-compoment-line3">
      <el-form
        :model="loginForm"
        label-position="left"
        id="login-form"
        ref="loginFormRef"
        :rules="rules"
      >
        <!-- username -->
        <el-form-item prop="userName" label-width="auto">
          <el-input
            class="el-input-login"
            placeholder="请输入账号"
            v-model="loginForm.userName"
          >
            <template #suffix>
              <img src="../../public/icon-username.png" alt="" />
            </template>
          </el-input>
        </el-form-item>
        <!-- password -->
        <el-form-item prop="password">
          <el-input
            class="el-input-login"
            placeholder="请输入密码"
            v-model="loginForm.password"
            :type="isShowPassword ? 'password' : 'text'"
          >
            <template #suffix>
              <img
                src="../../public/icon-password.png"
                alt=""
                @click="isShowPassword = !isShowPassword"
              />
            </template>
          </el-input>
        </el-form-item>
        <!-- submmit bottom -->
        <el-form-item class="el-form-item-submit">
          <el-button
            type="info"
            plain
            hide-required-asterisk="true"
            @click="login()"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- forget pwd -->
    <div class="login-compoment-line4">
      <el-button type="text" size="mini">忘记密码</el-button>
      <el-button type="text" size="mini">如何获取使用资格？</el-button>
    </div>
    <!-- other ways to login -->
    <div class="login-compoment-line5">
      <span>其他方式登录:</span>
      <div class="login-compoment-line5-imgs">
        <h1>
          <a href="#">
            <img src="../../public/icon-wechat.png" alt="#" />
          </a>
        </h1>
        <h1>
          <a href="#"><img src="../../public/icon-qq.png" alt="#"/></a>
        </h1>
        <h1>
          <a href="#"><img src="../../public/icon-weibo.png" alt="#"/></a>
        </h1>
      </div>
    </div>
    <!-- copyright -->
    <div class="login-compoment-line6">
      <span>华南师范大学网络教育学院 设计开发</span>
      <span>Copyright © 2020-2021 All Rights Reserved</span>
      <span>Designed by Laikey @ GDOU. Program by zhuoxue</span>
    </div>
  </div>
  <!-- </el-container> -->
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed } from "vue";
import { userLogin } from "@/api/userApi";
import { loginRules } from "@/const/rules";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "LoginComponent",
  components: {},
  setup() {
    // clear loaclstorage
    localStorage.clear();

    const loginForm = reactive({
      userName: "",
      password: ""
    });
    const loginFormRef = ref();

    // is show password
    const isShowPassword = ref<boolean>(true);

    const changePasswordInputType = () => {
      isShowPassword.value = !isShowPassword.value;
    };

    // login request
    const login = () => {
      loginFormRef.value.validate((valid: boolean) => {
        if (!valid) {
          ElMessage.error("登陆失败！请检查输入数据");
          return;
        } else {
          userLogin(loginForm.userName, loginForm.password);
        }
      });
    };
    // 表单验证

    // user object
    return {
      login,
      loginForm,
      loginFormRef,
      isShowPassword,
      changePasswordInputType,
      rules: computed(() => loginRules)
    };
  }
});
</script>

<style>
#login-component h1 {
  margin: 0;
  padding: 0;
}
.login-compoment span {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
/* login */
#login-component {
  /* 最小宽度防止里面的文字溢出 */
  min-width: 400px;
  min-height: 500px;
  padding: 40px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
}

/* line1 */
/* flex布局 */
.login-component-line1 {
  display: flex;
  /* justify-content属性定义了项目在主轴上的对齐方式。 */
  justify-content: space-between;
  align-items: flex-start;
}
.login-title {
  font-size: 23px;
  color: rgb(40, 40, 40);
}
/* line1 */

/* line2 --form */
.login-compoment-line2 {
  margin: 30px 0 30px 0px;
}
.login-compoment-line2 span {
  font-size: 15px;
  color: rgb(109, 109, 109);
}
/* 图片自适应分辨率 */
.el-input img {
  width: 100%;
  height: 100%;
}
/* 提交按钮居中 */
.el-form-item-submit {
  margin-bottom: 10px;
}
.el-form-item-submit .el-form-item__content {
  text-align: center;
}
.el-form-item-submit .el-button {
  background-color: rgb(86, 162, 188);
  color: #ffffff;
  width: 300px;
  font-size: 18px;
}
/* line2 --form */

/* line4 */
.login-compoment-line4 {
  display: flex;
  justify-content: center;
}
.login-compoment-line4 .el-button {
  font-size: 14px;
  color: rgb(130, 130, 130);
}
/* line4 */

/* line5 */
.login-compoment-line5 {
  /* 垂直居中 */
  margin-top: 30px;
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.login-compoment-line5-imgs {
  display: flex;
}
.login-compoment-line5-imgs img {
  margin: 0 3px;
}
.login-compoment-line5 span {
  font-size: 13px;
  color: rgb(130, 130, 130);
}
/* line5 */

/* line6 */
.login-compoment-line6 {
  margin: 30px 0 10px 0;
  display: flex;
  /* 纵向排列 */
  flex-direction: column;
  text-align: center;
}
.login-compoment-line6 span {
  padding: 2px 0;
  font-size: 13px;
  color: rgb(130, 130, 130);
}
/* line6 */

/* 自定义element-plus样式 */
#login-form .el-input__inner {
  border-radius: 0px;
  border: none;
  background-color: rgb(236, 237, 239);
}
/* 去掉自定义图标右边的right */
.el-input__suffix {
  right: 0;
}
/* 自定义element-plus样式 */
</style>
